<template>
  <el-dialog title="分配用户角色" :visible.sync="dialogVisible" width="48%">
    <!-- 表单区域 -->
    <p>当前用户名是：{{userName}}</p>
    <p>当前角色为：{{userRole}}</p>
    <p>
      分配新角色：
      <el-select placeholder="请选择" v-model="newRole">
        <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id"></el-option>
      </el-select>
    </p>
    <!-- 底部区域 -->
    <span slot="footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data: function () {
    return {
      // 用于控制对话框显隐
      dialogVisible: false,
      addUserForm: {},
      // 表单校验规则
      formRules: {},
      // 角色列表信息
      roleList: [],
      id: '',
      // 用户名
      userName: '',
      // 用户角色
      userRole: '',
      // 分配的角色
      newRole: ''
    }
  },
  methods: {
    // 获取用户角色列表
    getRoleList: async function (row) {
      this.userName = row.username
      this.userRole = row.role_name
      this.id = row.id
      const res = await this.$http.get('roles')
      if (res.meta.status !== 200) {
        return this.$message.warning('角色列表获取失败')
      }
      this.roleList = res.data
    },
    confirm: async function () {
      if (!this.newRole) {
        return this.$message.warning('请选择要分配的角色')
      }
      const res = await this.$http.put(`users/${this.id}/role`, { rid: this.newRole })
      if (res.meta.status !== 200) {
        return this.$message.warning(res.meta.msg)
      }
      this.$message.success('角色分配成功')
      this.$parent.getUserList()
      this.dialogVisible = false
    }
  }
}
</script>
